<template>
    <div>
      <List :loadapi="loadapi" :filterapi="filterapi" >
        <template v-slot:searchBar="slotProps">
          <SearchBar :keyword="slotProps.condition" :viewoptionArr="slotProps.viewoptionArr" @handleClickViewOption="slotProps.handleClickViewOption" @hanldeClickFilter="slotProps.hanldeClickFilter" @handleClickSearch="slotProps.handleClickSearch" @handleInputSearch="slotProps.handleInputSearch"></SearchBar>
        </template>
          <template v-slot:listItem="slotProps">
            <div class="L-box">
              <WeekreportsItem  idobject="weekreports" :item="slotProps.itemData"></WeekreportsItem>
            </div>
          </template>
      </List>
    </div>
  </template>
  
  <script setup lang="ts" name="weekreports">
  
  import List from "@/components/common/List.vue"
  import WeekreportsItem from "@/components/base/Weekreports/WeekreportsItem.vue"
  import SearchBar from "@/components/common/SearchBar.vue"


  
  const loadapi = `weekreports.list.do`
  const filterapi =  `weekreports.query.do`
  </script>
  
  <style>
  
  .L-avatar-box {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #409eff;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  
  </style>